<template>
  <Dividetb>
    <template #top>
      <TopBox :title="'回收站'">
        <FilterSearch
          :placeholder="'请输入搜索关键词'"
          :searchCallBack="searchCallBack"
        />
        <!-- <topButtonGroup :buttonList="tbuttonList" /> -->
        <topButtonGroupDoc :buttonList="tbuttonList" />
      </TopBox>
    </template>
    <template #bottom>
      <div class="tableBox">
        <el-table
          class="listTable"
          :data="tableData"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          @cell-mouse-enter="cellMouseEnter"
          @cell-mouse-leave="cellMouseLeave"
          ref="tableRef"
        >
          <el-table-column prop="name" width="180">
            <template #header>
              <div style="width: 100%; text-align: left">名称</div>
            </template>
            <template #default="scope">
              <div style="display: flex; align-items: center" class="name">
                <el-icon><folder /></el-icon>
                <!-- <span style="margin-left: 10px">
                  {{ scope.row.folderName }}
                </span> -->
                <span
                  style="margin-left: 10px"
                  v-html="scope.row.folderName"
                ></span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="position" label="原位置" />
          <el-table-column prop="updateTime" label="删除时间" />
          <el-table-column label="操作" width="100">
            <template #default="scope">
              <el-dropdown placement="bottom" popper-class="opeDropdown">
                <el-button link size="small" :icon="More" class="moreBtn">
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="RecoveryFile(scope.row)">
                      <el-button link :icon="FileRecovery">恢复 </el-button>
                    </el-dropdown-item>
                    <el-dropdown-item @click="DeleteFile(scope.row)">
                      <el-button type="danger" link :icon="Delete"
                        >删除
                      </el-button>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
  </Dividetb>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { More, Delete } from "@element-plus/icons-vue";
import useTagStore from "@/stores/tagList";
import Dividetb from "@/layout/components/dividetb.vue";
import TopBox from "@/components/TopTitleBox/index.vue";
import FilterSearch from "@/components/TopTitleBox/FilterSearch.vue";
import topButtonGroup from "@/components/ButtonGroup/topButtonGroup.vue";
import topButtonGroupDoc from "@/components/ButtonGroup/topButtonGroupDoc.vue";
import FileRecovery from "@/assets/customIcon/FileRecovery.vue";
import { getRecycleBinList } from "@/api/folder.js";
import { cellMouseEnter, cellMouseLeave } from "@/utils/cellmouseEvent.js";
defineOptions({ name: "MyBin" });
const route = useRoute();
const tagStore = useTagStore();
// 按钮列表
const tbuttonList = ref([
  {
    label: "回退",
    icon: "el-icon-back",
    type: "b2",
    onClick: () => {
      console.log("点击了回退");
      tagStore.historyBack({
        name: route.path,
        breadcrumbName: route.query.name || "文档",
      });
    },
  },
  {
    label: "前进",
    icon: "el-icon-right",
    type: "b2",
    onClick: () => {
      console.log("点击了我的文件夹");
      tagStore.historyFoward({
        name: route.path,
        breadcrumbName: "文档",
      });
    },
  },
  {
    label: "添加",
    icon: "el-icon-CirclePlus",
    type: "b2",
    onClick: () => {
      console.log("点击了我的文件夹");
    },
  },
  {
    label: "刷新",
    icon: "el-icon-refresh",
    type: "b2",
    onClick: () => {
      console.log("点击了我的知识库");
    },
  },
  {
    label: "评论",
    icon: "el-icon-ChatDotRound",
    type: "b2",
    onClick: () => {
      console.log("点击了评论");
    },
  },
  {
    label: "审批",
    icon: "el-icon-stamp",
    type: "b2",
    onClick: () => {
      console.log("点击了我的知识库");
    },
  },
  {
    label: "批量删除",
    icon: "el-icon-delete",
    type: "b2",
    onClick: () => {
      console.log("点击了批量删除");
    },
  },
  // {
  //   label: "列表视图切换",
  //   icon: "FaAlignJustify",
  //   type: "b2",
  //   onClick: () => {
  //     console.log("点击了回收站");
  //   },
  // },
]);
const tableData = ref([
  {
    folderName: "文档1",
    position: "文件夹1",
    updateTime: "2023-08-15 10:30:00",
  },
  {
    folderName: "文档2",
    position: "文件夹2",
    updateTime: "2023-08-15 10:30:00",
  },
  {
    folderName: "文档3",
    position: "文件夹3",
    updateTime: "2023-08-15 10:30:00",
  },
]);
const RecoveryFile = (row) => {
  console.log("恢复文件", row);
};
const DeleteFile = (row) => {
  console.log("删除文件", row);
};
const total = ref(0);
const pagination = reactive({
  pageNum: 1,
  pageSize: 10,
});
const filtrateFormData = reactive({
  delFlag: "1",
});
const getMyBinList = async (data = {}) => {
  let params = { ...pagination, ...filtrateFormData, ...data };
  console.log(params, "获取列表数据1");
  await getRecycleBinList({ ...params }).then((res) => {
    if (res.code === 200) {
      console.log(res.rows, "获取列表数据2");
      tableData.value = res.rows;
      total.value = res.total;
    }
  });
};

const searchCallBack = (word, time) => {
  console.log("搜索回调", word, time);
};
onMounted(async () => {
  console.log("我的文件夹挂载完成");
  // 调用接口获取数据
  await getMyBinList();
});
</script>
<style lang="scss" scoped>
.tableBox {
  :deep(.cell) {
    display: flex;
    justify-content: center;
    font-size: var(--el-font-size-base);
    &:has(.name) {
      justify-content: start;
    }
  }
  :deep(.zhiding) {
    border-bottom: none !important;
  }
  .moreBtn {
    display: none;
    &.active {
      display: flex;
    }
  }
}
.opeDropdown {
  button {
    width: 100%;
    justify-content: start;
  }
}
</style>
